<!--
(c) Copyright Ascensio System SIA 2020

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

	http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>OpenAI</title>
	<script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.js"></script>
	<script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins-ui.js"></script>
	<link rel="stylesheet" href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css">
	<script src="vendor/jquery/jquery-3.7.1.min.js"></script>
	<script type="text/javascript" src="vendor/GPT-3-Encoder/encoder.js"></script>
	<script src="vendor/md/markdown-it.js"></script>
	<script type="text/javascript" src="components/Tooltip/script.js"></script>
	<link rel="stylesheet" href="components/Tooltip/style.css">
	<link rel="stylesheet" href="./resources/styles/chat.css">
	<script type="text/javascript" src="scripts/chat.js"></script>
</head>
<body style="display: flex;">
	<div id="chat_window" class="chat_window hidden">
		<div id="chat_wrapper" class="form-control empty">
			<div id="chat" class="noselect">
				<div id="start_panel">
					<div id="welcome_text">
						<br/>
						<br/>
						<span class="i18n">I'm here to assist you with all your text creation and editing needs. Feel free to ask me anything about your document or anything else that's on your mind.</span>
						<br/>
						<br/>
						<span class="i18n">Let’s make your content shine together!</span>
					</div>
					<div id="welcome_buttons_list"></div>
				</div>
			</div>
		</div>
		<div id="tokens_info" class="tokens_info">
			<div class="form-control div_title_chat hidden">
				<span class="i18n">Maximum 16000 tokens are available.</span>
				<br>
				<span class="i18n">For work with this model we should save chat history and sent it into a request.</span>
				<span class="i18n">But we have a limit on the number of tokens in the request.</span>
				<span class="i18n">That's why sometimes you should clear your chat history.</span>
				<div class="text_align_end">
					<button id="clear_history" style="margin-top: 5px;" class="form-control btn-text-default i18n">Clear history</button>
				</div>	
			</div>
			<div class="text_align_end">
				<span class="i18n">Tokens in the request about: </span>
				<span id="cur_tokens">0</span>
			</div>
			<div class="text_align_end">
				<span class="i18n">Total tokens are used in last request: </span>
				<span id="total_tokens">0</span>
			</div>

		</div>
		<div id="attached_text_wrapper" class="hidden">
			<div id="attached_text"></div>
			<img id="attached_text_close" draggable="false" src="resources/icons/light/close.png" class="icon"/>
		</div>
		<div id="input_message_wrapper">
			<textarea id="input_message" rows="1" class="form-control" spellcheck="false"></textarea>
			<div id="input_message_submit" class="noselect">
				<img src="resources/icons/light/btn-demote.png" draggable="false" class="icon"/>
			</div>
		</div>
	</div>
	<div id="loader-container" class="loader hidden"></div>
	<div id="div_err" class="hidden div_error err_background">
		<label class="lb_err i18n" style="font-weight: bold;">Error:</label>
		<label id="lb_err" class="lb_err"></label>
	</div>
</body>
</html>